import React, { useState } from "react";
import { Button } from "antd";
import { useTranslation } from "react-i18next";

import questionIcon from "../../assets/images/dapp/questionIcon.svg";
import greenUpIcon from "../../assets/images/dapp/greenUp.png";
import TokenBanner from "../../assets/images/ecology/tokenBanner.png";
import Icon1 from "../../assets/images/ecology/contractAddressIcon1.svg";
import Icon2 from "../../assets/images/ecology/contractAddressIcon2.svg";
const EsdtToken = () => {
  const { t } = useTranslation();
  const [overviewData, setOverviewData] = useState({
    total: "5,734.1793",
    transTotal: "49,534,853.1945",
    rate: "-7.17",
    coin: "ESTD",
    date: "2023-09-12",
    redemption: "228.7619",
    realTime: "1568.9828",
    tvl: "89,877,384.00",
    contractAddress: "ox123s3c…g4df4r",
    apr: "387.00%",
  });
  return (
    <div className="app-container esdttoken-page">
      <div className="top-box-bk">

      <div className="top-box">
        <div className="top-banner">
          <div className="banner-title">{t("esdtToken.bannerTitle")}</div>
          <div className="banner-sub-title">
            {t("esdtToken.bannerSubTitle")}
          </div>
          <div className="banner-btn">{t("esdtToken.bannerBtn")}</div>
          <img src={TokenBanner} className="banner-img" />
        </div>
        <div className="top">
          <div className="left">
            <div className="left-chart"></div>
            <div className="contract-address-row">
              <div className="address-value">
                {t("ltToken.contractAddress")}:
                0x0954906da0bf32dg592j25f46056d22f08w17ls7
              </div>
              <div className="icon-box">
                <img className="icon1" src={Icon1}></img>
                <img className="icon2" src={Icon2}></img>
              </div>
            </div>
          </div>
          <div className="right">
            <div className="header">
              <div className="title-text">{t("home.blockOneTitle")}</div>
              <div className="right-corner">
                {t("dappIndexoverview.topRightCorner")}
                <img src={questionIcon} class="question-icon"></img>
              </div>
            </div>
            <div className="total-data-box">
              <div className="total-text">
                <img src={greenUpIcon} class="trend-icon"></img>
                {overviewData.total}
              </div>
              <div className="trans-row">
                <div className="trans-text">{overviewData.transTotal}</div>
                <div className="time-data">24h: {overviewData.rate}</div>
              </div>
              <div className="data-group">
                <div className="data-row">
                  <div className="item-label">
                    {t("dappIndexoverview.coin")}
                  </div>
                  <div className="item-value blod-text">
                    {overviewData.coin}
                  </div>
                </div>
                <div className="data-row">
                  <div className="item-label">
                    {t("dappIndexoverview.date")}
                  </div>
                  <div className="item-value">{overviewData.date}</div>
                </div>
                <div className="data-row">
                  <div className="item-label">
                    {t("dappIndexoverview.redemption")}
                  </div>
                  <div className="item-value">{overviewData.redemption}</div>
                </div>
                <div className="data-row">
                  <div className="item-label">
                    {t("dappIndexoverview.realTime")}
                  </div>
                  <div className="item-value">{overviewData.realTime}</div>
                </div>
                <div className="data-row">
                  <div className="item-label">{t("dappIndexoverview.tvl")}</div>
                  <div className="item-value">{overviewData.tvl}</div>
                </div>
                <div className="data-row">
                  <div className="item-label">
                    {t("dappIndexoverview.contractAddress")}
                  </div>
                  <div className="item-value origin-text">
                    {overviewData.contractAddress}
                  </div>
                </div>
                <div className="data-row">
                  <div className="item-label">{t("dappIndexoverview.apr")}</div>
                  <div className="item-value blod-text green-text">
                    {overviewData.apr}
                  </div>
                </div>
              </div>
              <div className="action-box" >
                <Button className="subscribe-btn">
                  {t("dappIndexoverview.subscribe")}
                </Button>
                <Button className="redemption-btn">
                  {t("dappIndexoverview.redemptionBtn")}
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
  
      <div className="about-box">
        <div className="header">
          <div className="title-box">
            <div className="title-text">
              {t("dappIndexoverview.aboutTitle")}
            </div>
          </div>
          <div className="corner-box"></div>
        </div>
        <div className="about-content">
          <div className="each-block">
            <div className="title">{t("dappIndexoverview.aboutTitle1")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc1")}</div>
          </div>
          <div className="each-block">
            <div className="title">{t("dappIndexoverview.aboutTitle2")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc2")}</div>
            <div className="sub-title">
              {t("dappIndexoverview.aboutSubTitle1")}
            </div>
            <ul className="desc-group">
              <li className="desc-item">{t("dappIndexoverview.aboutDesc3")}</li>
              <li className="desc-item">{t("dappIndexoverview.aboutDesc4")}</li>
              <li className="desc-item">{t("dappIndexoverview.aboutDesc5")}</li>
              <li className="desc-item">{t("dappIndexoverview.aboutDesc6")}</li>
            </ul>
            <div className="sub-title">
              {t("dappIndexoverview.aboutSubTitle2")}
            </div>
            <div className="desc">{t("dappIndexoverview.aboutDesc8")}</div>
            <div className="sub-title">
              {t("dappIndexoverview.aboutSubTitle3")}
            </div>
            <div className="desc">{t("dappIndexoverview.aboutDesc9")}</div>
            <div className="sub-title">
              {t("dappIndexoverview.aboutSubTitle4")}
            </div>
            <div className="desc">{t("dappIndexoverview.aboutDesc10")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc11")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc12")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc13")}</div>
          </div>
          <div className="each-block">
            <div className="title">{t("dappIndexoverview.aboutTitle3")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc14")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc15")}</div>
          </div>
          <div className="each-block">
            <div className="title">{t("dappIndexoverview.aboutTitle4")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc16")}</div>
            <div className="desc">{t("dappIndexoverview.aboutDesc17")}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default EsdtToken;
